<template>
  <div>
    <BreakSpace label="图解基础信息" :containerStyle="{ marginBottom: '5px' }" />
    <div :style="{ textAlign: 'right', marginBottom: '5px' }">
      <multiuse-button @click="saveDialog" type="primary">保 存</multiuse-button>
      <multiuse-button @click="closeDialog">返 回</multiuse-button>
    </div>
    <FormPanel ref="formPanel" :list="formInfoList" labelWidth="100" :isSubmitBtn="false" @formChange="formChangeHandle"> </FormPanel>

    <BreakSpace label="图解总成信息" :containerStyle="{ marginBottom: '15px' }" />
    <TopFilter ref="topFilter" :list="topFilterList" :cols="3" labelWidth="80" @filterChange="changeHandle" @onCollapse="collapseHandle"></TopFilter>
    <FilterTable
      height="auto"
      ref="tableInfo"
      :columns="columns"
      :fetchapi="graphicAssemblyList"
      :onRowSelectChange="selectRow"
      :isSelectColumn="isSelectColumn"
      :params="fetchParams"
      :datakey="'records'"
      :rowstyles="styleList"
      :onSyncTableData="syncDataChange"
      :onColumnsChange="(columns) => (this.columns = columns)"
      columnsRef="notification_maintain_info_02"
    >
      <template slot="controls">
        <el-button size="small" type="primary" icon="el-icon-plus" @click="addFun()">新增</el-button>
      </template>
    </FilterTable>

    <BaseDialog title="添加备件" :visible.sync="isShowSearchCustomer" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <Search :customerNo="kehuxuanze" @close="isShowSearchCustomer = false" @addCustomerCode="confirmSearchCustomer" />
    </BaseDialog>

    <BaseDialog :visible.sync="issearchZc" :title="'上传总成图片'" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <ImageZc :rowData="imgZcRowData" @close="imagePartcloseHandler" @picFiles="selectPicFiles" />
    </BaseDialog>

    <BaseDialog :visible.sync="issearch" :title="'查看备件图片'" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <ImagePart :rowData="imgRowData" @close="dealercloseHandler" />
    </BaseDialog>

    <!-- 查看凭证 -->
    <el-image-viewer :url-list="picList" v-show="imagesViewShow" :on-close="closeImagesViewer"></el-image-viewer>
  </div>
</template>

<script>
import { getGraphicAssemblyList, update, updateGraphicAssembly, getGraphicModelList, getGraphicSystemList, getMenuLevelList, deleteGraphicAssembly } from '@/api/graphic/catalogue/index';
import { dictionary } from '@/utils/dictMixin';
import { getFileGroup } from '@/api/partsmanage/common/file';
import { getUserId } from '@/assets/js/auth';
import config from '@/assets/js/config';
import axios from '@/api/fetch';
import ElImageViewer from 'element-ui/packages/image/src/image-viewer';
import Search from './Search';
import ImagePart from './imagePart';
import ImageZc from './imageZc';
export default {
  name: 'partInfo',
  mixins: [dictionary],
  components: { ElImageViewer, Search, ImagePart, ImageZc },
  props: {
    pdata: {
      type: Object,
      default: () => ({}),
    },
    type: { type: String, default: 'add' },
    rowData: { type: Object, default: () => ({}) },
  },
  data() {
    return {
      // jyIspare:true,
      searchIndex: '',
      selectRowData: {},
      imgZcRowData: {},
      imgRowData: {},
      issearchZc: false,
      issearch: false,
      kehuxuanze: '',
      isShowSearchCustomer: false,
      isSpare: false,
      systemCode: '',
      modelCode: '',
      styleList: [],
      isSelectColumn: false,
      saveData: null,
      // uploadPrefix: config.uploadUrl,// 附件上传前缀
      formInfoList: this.createFormInfoList(),
      // subPartColumns: this.createSubPartTable(),
      columns: this.createColumns(),
      graphicAssemblyList: getGraphicAssemblyList,
      picFiles: [],
      picParams: { xtdjid: '', xtfjlx: 'tt_part_info' },
      fetchParams: { graphicId: '' },
      form: { fileList: [] },
      showSubPart: false,
      loading: false,
      partData: {},
      subPartsInfo: [],
      saveJson: {},
      picList: [],
      arry: [{ text: 0, value: 0 }],
      picLimit: 1,
      imagesViewShow: false,
      oneMenuParent: -1,
      twoMenuParent: -1,
      topFilterList: this.createTopFilterList()
    };
  },

  created() {
    if (this.type == 'edit') {
      this.fetchParams.graphicId = this.rowData.graphicId;
    } else {
      this.fetchParams.graphicId = -1;
    }
    this.picParams.xtdjid = this.rowData.id;
    this.partData = this.rowData;
    console.info(this.rowData.graphicId);
    this.init(this.rowData);
  },
  methods: {
    selectRow(row) {
      this.selectRowData = row;
    },
    formChangeHandle(val) {
      this.saveData = val;
    },
    //总成图片查看关闭
    imagePartcloseHandler(val) {
      this.styleList = [];
      this.issearchZc = false;
    },
    //备件图片查看关闭
    dealercloseHandler(val) {
      this.styleList = [];
      this.issearch = false;
    },
    getMenuLevelArray() {
      let params = {
        oneMenu: 0,
        graphicId: this.rowData.graphicId,
      };
      let res = [];
      getMenuLevelList(params).then((response) => {
        res.push({ text: 0, value: 0 });
        response.data.forEach((x) => {
          res.push({ text: x.graphicCode, value: x.graphicCode });
        });
      });
      return res;
      console.log(this.arry, '传值前的数据');
    },
    getMenuLevelArray2() {
      let params = {
        oneMenu: -1,
        isSpare: 10041002,
        level: '2',
        graphicId: this.rowData.graphicId,
      };

      let res = [];
      console.log(this.oneMenuParent, 'getMenuLevelArray2');
      getMenuLevelList(params).then((response) => {
        response.data.forEach((x) => {
          res.push({ text: x.graphicCode, value: x.graphicCode });
        });
      });
      return res;
    },
    getMenuLevelArray3() {
      let params = {
        twoMenu: -1,
        isSpare: 10041002,
        level: '3',
        graphicId: this.rowData.graphicId,
      };

      let res = [];
      console.log(this.twoMenuParent, 'getMenuLevelArray3');
      getMenuLevelList(params).then((response) => {
        response.data.forEach((x) => {
          res.push({ text: x.graphicCode, value: x.graphicCode });
        });
      });
      return res;
    },
    confirmSearchCustomer(row) {
      // let flag=true;
      this.$refs.tableInfo.$refs.pageTable.list.forEach((x) => {
        // if(x.graphicCode==row[0].bjxmbh&&x.graphicName==row[0].bjzwmc){
        //   this.$notify.error({ title: '提示信息', message:'备件信息已存在，添加失败!' });
        //   // flag=false;;
        // }
        // if(flag){
        if (x.index == this.searchIndex) {
          x.graphicCode = row[0].bjxmbh;
          x.graphicName = row[0].bjzwmc;
          // x.partId=row[0].id;
        }
      });
    },
    selectPicFiles(val) {
      this.picFiles = val;
      debugger;
    },
    getGraphicModelArray() {
      // debugger;
      let res = [];
      getGraphicModelList().then((response) => {
        response.data.forEach((x) => {
          // this.fromInfo.modelName=x.modelName
          res.push({ text: x.modelCode, value: x.modelName });
        });
      });
      return res;
    },
    getGraphicSystemArray() {
      let res = [];
      getGraphicSystemList().then((response) => {
        response.data.forEach((x) => {
          res.push({ text: x.systemCode, value: x.systemName });
        });
      });
      return res;
    },
    closeImagesViewer() {
      this.imagesViewShow = false;
    },
    selectChange(val) {
      this.rowSelectData = val;
    },
    init(data) {
      this.formInfoList.forEach((x) => {
        if (this.rowData[x.fieldName] != null && this.rowData[x.fieldName] != '') {
          x.initialValue = this.rowData[x.fieldName];
        }
      });
    },
    createFormInfoList() {
      return [
        { type: 'INPUT', hidden: 'true', fieldName: 'graphicId' },
        {
          type: 'SELECT',
          label: '车型代码',
          fieldName: 'modelCode',
          placeholder: '请选择...',
          disabled: true,
          itemList: this.getGraphicModelArray(),
          change: (val) => {
            this.modeOnChange(val);
          },
          rules: [{ required: true, message: '请选择车型代码...', trigger: 'blur' }],
        },
        { type: 'INPUT', label: '车型名称', fieldName: 'modelName', disabled: true },
        {
          type: 'SELECT',
          label: '系统代码',
          fieldName: 'systemCode',
          placeholder: '请选择...',
          disabled: true,
          itemList: this.getGraphicSystemArray(),
          change: (val) => {
            this.systemOnChange(val);
          },
          rules: [{ required: true, message: '请选择系统代码...', trigger: 'blur' }],
        },
        { type: 'INPUT', label: '系统名称', fieldName: 'systemName', disabled: true },
        {
          type: 'SELECT',
          label: '完成状态',
          fieldName: 'okstate',
          placeholder: '请选择...',
          itemList: this.createDictList('3042'),
          rules: [{ required: true, message: '请选择状态...', trigger: 'blur' }],
        },
        { type: 'TEXT_AREA', label: '备注', fieldName: 'remark', selfCols: 3, maxlength: 180 },
      ];
    },
    saveDialog() {
      var systemCode;
      var modelCode;
      this.formInfoList[1].itemList.forEach((x) => {
        if (x.value == this.formInfoList[1].initialValue) {
          modelCode = x.text;
        }
      });
      this.formInfoList[3].itemList.forEach((x) => {
        if (x.value == this.formInfoList[3].initialValue) {
          systemCode = x.text;
        }
      });

      this.$refs.formPanel.SUBMIT_FORM();
      let graphicAssemblyInfoDTO = {
        graphicId: this.rowData.graphicId,
        systemCode: systemCode,
        systemName: this.saveData.systemName,
        modelCode: modelCode,
        modelName: this.saveData.modelName,
        okstate: this.saveData.okstate,
        remark: this.saveData.remark,
      };
      this.loading = true;
      // console.log(this.saveData)
      update(graphicAssemblyInfoDTO).then((res) => {
        if (res.resultCode === 200) {
          // console.log(res)
          this.loading = false;
          this.$emit('save');
          this.$emit('close', { visible: false, type: 'close' });
          return this.$notify.success({ title: '提示信息', message: '保存成功' });
        } else {
          this.loading = false;
          this.$notify.error({ title: '提示信息', message: res.errMsg || '保存失败!' });
        }
      });
    },
    closeDialog() {
      this.$emit('close', { visible: false, type: 'close' });
    },
    createColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: (props) => {
            return <span>{props.row.index + 1}</span>;
          },
        },
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 150,
          fixed: 'left',
          render: (props, h) => {
            let loading = this.loading;
            if (props.row.isSpare === 10041001) {
              return (
                <div>
                  <el-button size="mini" type="text" onClick={() => this.updateRows(props.row)}>
                    保存
                  </el-button>
                  <el-button size="mini" type="text" onClick={() => this.deleteRow(props.row, props.$index)}>
                    删除
                  </el-button>

                  <el-button
                    size="mini"
                    type="text"
                    onClick={() => {
                      this.selectPartImg(props.row);
                    }}
                  >
                    备件照片
                  </el-button>
                </div>
              );
            } else {
              return (
                <div>
                  <el-button size="mini" type="text" onClick={() => this.updateRows(props.row)}>
                    保存
                  </el-button>
                  <el-button size="mini" type="text" onClick={() => this.deleteRow(props.row, props.$index)}>
                    删除
                  </el-button>

                  <el-button
                    size="mini"
                    type="text"
                    onClick={() => {
                      this.editImg(props.row);
                    }}
                  >
                    附件上传
                  </el-button>
                </div>
              );
            }
          },
        },
        {
          title: '备件照片图片ID',
          dataIndex: 'partId',
          filterType: 'input',
          sorter: true,
          hidden: true,
        },
        {
          title: '版本号',
          dataIndex: 'recordVersion',
          filterType: 'input',
          sorter: true,
          hidden: true,
        },
        {
          title: '热点编号',
          dataIndex: 'redianCode',
          filterType: 'input',
          sorter: true,
          editable: true,
          editRequired: true,
          editType: 'number',
          defaultEditable: true,
          width: 100,
          maxlength: 100,
        },
        {
          title: '代码',
          dataIndex: 'graphicCode',
          filterType: 'input',
          sorter: true,
          editable: true,
          defaultEditable: true,
          editRequired: true,
          maxlength: 100,
          width: 200,
          editType: 'text',
          render: (props) => {
            let inputShow = false;
            if (props.row.oneMenu != '0') inputShow = true;
            return (
              <div class="graphicCode">
                <el-input v-model={props.row.graphicCode} size="mini" readonly={inputShow}>
                  {props.row.graphicCode}
                </el-input>
                <el-button size="mini" v-show={inputShow} style="float:right" icon="el-icon-search" onClick={() => this.isShowSearch(props.row.index)}></el-button>
              </div>
            );
          },
        },
        {
          title: '名称',
          dataIndex: 'graphicName',
          filterType: 'input',
          sorter: true,
          editable: true,
          defaultEditable: true,
          editRequired: true,
          maxlength: 100,
          width: 300,
          editType: 'text',
          render: (props) => {
            let inputShow = false;
            if (props.row.oneMenu != '0') inputShow = true;
            return (
              <div class="graphicName">
                <el-input v-model={props.row.graphicName} size="mini" readonly={inputShow}>
                  {props.row.graphicName}
                </el-input>
                <el-button size="mini" v-show={inputShow} style="float:right" icon="el-icon-search" onClick={() => this.isShowSearch(props.row.index)}></el-button>
              </div>
            );
          },
        },
        // {
        //   title: '三级代码',
        //   dataIndex: 'threeMenu',
        //   filterType: 'input',
        //   sorter: true,
        //   filter: true,
        //   editable: true,
        //   editType: 'select',
        //   editItems: [],
        //   dictItems: []
        // }, {
        //   title: '二级代码',
        //   dataIndex: 'twoMenu',
        //   filterType: 'input',
        //   sorter: true,
        //   filter: true,
        //   editable: true,
        //   editType: 'select',
        //   editItems: [],
        //   dictItems: []
        //   // onChange: (index, data) => {
        //   //              this.twoMenuOnChange(data.twoMenu)
        //   //            }
        // },
        {
          title: '上级代码',
          dataIndex: 'oneMenu',
          filterType: 'input',
          sorter: true,
          filter: true,
          editable: true,
          defaultEditable: true,
          editRequired: true,
          editType: 'select',
          editItems: this.getMenuLevelArray(),
          dictItems: this.getMenuLevelArray(),
          onChange: (index, data) => {
            this.oneMenuOnChange(data);
          },
        },
        {
          title: '单元用量',
          dataIndex: 'unitAmount',
          filterType: 'input',
          sorter: true,
          editable: true,
          maxlength: 100,
        },
        {
          title: '备注',
          dataIndex: 'remarkAssembly',
          filterType: 'input',
          sorter: true,
          editable: true,
          maxlength: 300,
          rules: [],
        },
        {
          title: '是否备件',
          dataIndex: 'isSpare',
          editable: true,
          defaultEditable: true,
          disabled: true,
          filterItems: this.createDictList('1004'),
          filterType: 'radio',
          editType: 'checkbox',

          editItems: [
            { text: '', trueValue: 10041001 },
            { text: '', falseValue: 10041002 },
          ],
        },
      ];
    },

    deleteRow(row, index) {
      this.$confirm('确认要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        deleteGraphicAssembly(row.assemblyId)
          .then((res) => {
            let params = {
              oneMenu: 0,
              graphicId: this.rowData.graphicId,
            };
            let rs = [];
            getMenuLevelList(params).then((response) => {
              rs.push({ text: 0, value: 0 });
              response.data.forEach((x) => {
                rs.push({ text: x.graphicCode, value: x.graphicCode });
              });
              for (let i = 0; i < this.columns.length; i++) {
                if (this.columns[i].dataIndex == 'oneMenu') {
                  this.columns[i].dictItems = rs;
                  this.columns[i].editItems = rs;
                  break;
                }
              }
            });
            this.$refs.tableInfo.EXECUTE_DELETE([row]);
            this.$notify.success({ title: '提示信息', message: '删除成功!' });
            //刷新页面
            // this.fetchParams={...this.fetchParams}
          })
          .catch((err) => {
            this.$notify.error({ title: '提示信息', message: '删除失败，系统出错！' });
          });
      });
    },
    selectPartImg(rows) {
      this.styleList = [];
      this.imgRowData = rows;
      this.issearch = true;
      this.styleList.push({ row: rows, styles: { backgroundColor: '#E6F7FF' } });
    },
    //编辑上传
    editImg(rows) {
      this.styleList = [];
      if (rows.assemblyId == 0) {
        //保存时赋值ID给 imgZcRowData
      } else {
        this.imgZcRowData = rows;
      }
      this.styleList.push({ row: rows, styles: { backgroundColor: '#E6F7FF' } });
      this.issearchZc = true;
    },
    // 获取表格所有数据
    syncDataChange(data) {
      // data.forEach(x => {
      //   console.log(x,"测试一下")
      // });
    },
    syncFun(details) {
      // this.saveData.xxList = details
    },
    modeOnChange(val) {
      this.formInfoList[2].initialValue = val;
    },
    systemOnChange(val) {
      this.formInfoList[4].initialValue = val;
    },
    isShowSearch(id) {
      this.searchIndex = id;
      this.isShowSearchCustomer = true;
    },

    twoMenuOnChange(val) {
      this.twoMenuParent = val;
    },
    oneMenuOnChange(val) {
      this.$refs.tableInfo.$refs.pageTable.list.forEach((x) => {
        if (x.index == val.index) {
          console.log(this.columns, 'columns');
          console.log(x, 'val');
          if (val.oneMenu != '0') {
            x.isSpare = 10041001;
          } else {
            x.isSpare = 10041002;
          }

          //   let params2 = {
          //     oneMenu: val.oneMenu,
          //     isSpare:10041001,
          //     level:"2",
          //     graphicId: this.rowData.graphicId
          //   }

          // let res2 = [];
          // getMenuLevelList(params2).then(response => {
          //   response.data.forEach(x => {
          //     res2.push({ text: x.graphicCode, value: x.graphicCode });
          //   });
          // });

          //       console.log(res2,"传值后的数据1");

          //       this.twoMenuParentList(res)
        }
      });
    },

    // twoMenuParentList(val){
    //   return val;
    // },
    addFun() {
      var p = {
        partId: 0,
        assemblyId: 0,
        redianCode: '',
        graphicCode: '',
        graphicName: '',
        threeMenu: '',
        twoMenu: '',
        oneMenu: '0',
        unitAmount: '',
        remarkAssembly: '',
        isSpare: 10041002,
      };
      this.$refs.tableInfo.EXECUTE_INSERT(p);
    },
    //子表保存
    updateRows(row) {
      let arry = this.$refs.tableInfo.$refs.pageTable.list;
      let n = 0;
      //校验是否为空
      if (row.graphicCode == '') {
        this.$message.error('保存失败，代码不能为空!');
        return;
      }
      if (row.graphicName == '') {
        this.$message.error('保存失败，名称不能为空!');
        return;
      }
      if (row.redianCode == '') {
        this.$message.error('保存失败，热点不能为空!');
        return;
      }
      if (row.redianCode <= 0) {
        this.$message.error('保存失败，热点不能为负数!');
        return;
      }
      // if(row.oneMenu=="0"){
      //   for(let i=0;i<arry.length;i++){
      //     let flag1 = arry[i].graphicCode==(row.graphicCode);
      //     let flag2 = arry[i].graphicName==(row.graphicName);
      //     if(flag1&&flag2){
      //       n++;
      //     }
      //   }
      // }else{
      //   for(let i=0;i<arry.length;i++){
      //     let flag1 = arry[i].redianCode==(row.redianCode);
      //     let flag2 = arry[i].graphicCode==(row.graphicCode);
      //     let flag3 = arry[i].graphicName==(row.graphicName);
      //     let flag4 = arry[i].oneMenu==(row.oneMenu);
      //     if(flag1&&flag2){
      //       n++;
      //     }
      //   }
      // }
      // if(n>1){
      //   this.$message.error('保存失败，已经存在相同的数据!');
      //   return;
      // }
      //获得主表信息
      let graphicInfoDTO = this.rowData;
      //获得子表信息，然后把主表信息封装到DTO
      let graphicAssemblyInfoDTO = {
        picFiles: this.picFiles,
        userId: getUserId(),
        graphicId: graphicInfoDTO.graphicId,
        systemCode: graphicInfoDTO.systemCode,
        systemName: graphicInfoDTO.systemName,
        modelCode: graphicInfoDTO.modelCode,
        modelName: graphicInfoDTO.modelName,
        okstate: graphicInfoDTO.okstate,
        remark: graphicInfoDTO.remark,
        assemblyId: row.assemblyId,
        redianCode: row.redianCode,
        graphicCode: row.graphicCode,
        graphicName: row.graphicName,
        threeMenu: row.threeMenu,
        twoMenu: row.twoMenu,
        oneMenu: row.oneMenu,
        unitAmount: row.unitAmount,
        remarkAssembly: row.remarkAssembly,
        isSpare: row.isSpare,
        recordVersion: row.recordVersion,
      };
      updateGraphicAssembly(graphicAssemblyInfoDTO)
        .then((res) => {
          if (res.resultCode == 200) {
            //赋值ID给上传图片组件
            this.imgZcRowData = res.data;
            //赋值数据给上级代码
            let params = {
              oneMenu: 0,
              graphicId: this.rowData.graphicId,
            };
            let rs = [];
            getMenuLevelList(params).then((response) => {
              rs.push({ text: 0, value: 0 });
              response.data.forEach((x) => {
                rs.push({ text: x.graphicCode, value: x.graphicCode });
              });
              for (let i = 0; i < this.columns.length; i++) {
                if (this.columns[i].dataIndex == 'oneMenu') {
                  this.columns[i].dictItems = rs;
                  this.columns[i].editItems = rs;
                  break;
                }
              }
            });
            //返回给页面
            row.assemblyId = res.data.assemblyId;
            //新增赋值,返回给页面
            if (res.data.partId != null) {
              row.partId = res.data.partId;
            }
            this.$notify.success({ title: '提示信息', message: '保存成功!' });
            //刷新页面
            // this.fetchParams={...this.fetchParams}
          } else {
            this.loading = false;
            this.$notify.error({ title: '提示信息', message: res.errMsg || '保存失败!' });
          }
        })
        .catch((err) => {
          this.loading = false;
          this.$notify.error({ title: '提示信息', message: '保存失败，系统出错！' });
        });
      // this.fetchParams.graphicId = this.rowData.graphicId;
    },
    createTopFilterList() {
      return [
        {
          type: 'INPUT',
          label: '代码',
          fieldName: 'graphicCode',
          placeholder: '请输入...'
        },
        {
          type: 'INPUT',
          label: '名称',
          fieldName: 'graphicName',
          placeholder: '请输入...'
        }
      ];
    },
    changeHandle(val) {
      let params = Object.assign({}, val, { xhrAbort: false });
      params.graphicId = this.rowData.graphicId;
      this.fetchParams = params;
    }
  }
};
</script>

<style lang="scss" scope>
.el-table__body-wrapper {
  overflow-x: auto;
  position: static;
}
.el-image {
  float: left;
  margin-left: 130px;
}
/* .el-image a {
    float: left;
} */
.imgfile {
  height: 60px;
  line-height: 60px;
  overflow: hidden;
}
.imgfile a {
  float: left;
  margin-left: 20px;
}
.imgfile img {
  float: left;
  margin-left: 30%;
  width: 100px;
  height: 100%;
  object-fit: cover;
}
.pdfdiv {
  float: left;
  margin-left: 30%;
  width: 100px;
  height: 100%;
  object-fit: cover;
}
.graphicCode {
  position: relative;
  .el-input {
    box-sizing: border-box;
    input {
      padding-right: 44px;
    }
  }
  .el-button {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
  }
}
.graphicName {
  position: relative;
  .el-input {
    box-sizing: border-box;
    input {
      padding-right: 44px;
    }
  }
  .el-button {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
  }
}
</style>
